<template>
   <div>

    <el-input v-model="name" style="width:200px;" @input="search()" placeholder="请输入内容"></el-input>
    <el-button type="success" size="medium" @click="dialogFormVisible = true" >添加</el-button>
   
    <el-button type="danger" size="medium" @click="dels">批量删除</el-button>

 

    <el-table :data="user"  style="width:100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="UserID" label="编号" width="60"></el-table-column>
          <el-table-column prop="Path" label="头像" width="80">
                    <template #default="{ row }">
                        <el-avatar :src="baseImg + row.Path"></el-avatar>
                    </template>
          </el-table-column>
          <el-table-column prop="UserName" label="姓名" width="100"></el-table-column>
          <el-table-column prop="Sex" label="性别" width="60"></el-table-column>
          <el-table-column prop="Birthday" label="出生日期" width="120">
                    <template #default="{ row }">
                        {{ row.Birthday.substr(0, 10) }}
                    </template>
          </el-table-column>
                <el-table-column prop="Phone" label="手机" width="120"></el-table-column>
                <el-table-column prop="RoleName" label="角色" width="120"></el-table-column>
                <el-table-column prop="Status" label="状态" width="120">
                    <template #default="{ row }">
                        <el-switch disabled v-model="row.Status" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
                <el-popconfirm @confirm="sc(scope.row.UserID)" confirm-button-text='好的' cancel-button-text='不用了'
                icon="el-icon-info"
                icon-color="red"
                :title="'请问确定要删除名称为'+scope.row.UserName+'?'"
              >
              <el-button slot="reference" type="danger"  size="mini">删除</el-button>
              </el-popconfirm> 
                <el-button type="warning"  @click="xg(scope.row)" size="mini">修改</el-button>
            </template>
          </el-table-column></el-table>


    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[3,6,8,20]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count">
    </el-pagination>
    


    <el-dialog title="添加用户" append-to-body :visible.sync="dialogFormVisible">
      <add :dialogAdd.sync="dialogFormVisible"></add>
    </el-dialog>
    <el-dialog title="修改用户" append-to-body :visible.sync="dialogUpdateVisible">
          <update :dialogUpdate.sync="dialogUpdateVisible" :data="content"></update>
    </el-dialog>

    </div>

</template>

<script type="module">
import add from '@/components/add.vue'
import basePath from '../../plugins/base'
import update from '@/components/update.vue'



export default {
    name:'user',
    data(){
        return {
          content:{},
            user:[],
            name:'',
            page:1,
            limit:3,
            count:0,
            dialogFormVisible:false,
            dialogUpdateVisible:false,
            baseImg:'',
            multipleSelection: []
            
        }
    },
    methods: {
     
      search(){
        this.axios({
     method:'get',
     url:'page',
     params:{page:this.page,limit:this.limit,name:this.name},
    }).then(res=>{
       this.user=res.data
       this.count=res.count
    }).catch(error=>{
        console.log('error: ', error);
    })
      },
      sc(id){
            this.axios({
                method:'delete',
                url:'User',
                params:{id:id}
            }).then(res=>{
                if(res.code>0){
                  this.$message({ type:'success', message:res.msg})
                 this.search();
                }else{
                  this.$message({ type:'danger', message:res.msg})
                }
            })
        },xg(zhi){

            this.dialogUpdateVisible=true
            this.content=JSON.parse(JSON.stringify(zhi))
         
        },
        handleSizeChange(val) {
       
        this.limit=val
        this.search()
      },
      handleCurrentChange(val) {
        this.page=val
        this.search()
      }, 
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log('val: ', val);
      },dels(){
        const ids=[];
        const names=[];
        this.multipleSelection.forEach(zhi=>{
          ids.push(zhi.UserID)
          names.push(zhi.UserName)
        })
        if(ids.length==0){
          this.$message({type:"danger",message:"请选择要删除的行"})
      
          return;

        }
        this.$confirm('你确定要删除'+names+'?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.axios({
          method:"delete",
          url:"User/Dels",
          data:ids
         }).then(res=>{
          if(res.code==1){
            this.$message({type:"success",message:res.msg})
           this.search();
          }else{
            this.$message({type:"danger",message:res.msg})
          }
         })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
   
      }
      
    }
    
    ,
    created(){
     this.search();
     this.baseImg = basePath.imgUrl;
   
    },
    components:{add,update}
    
}
</script>

<style scoped>
</style>